<template>
  <div class="page_report">
    <div id="export_report_id" style="width: 1500px; margin: auto">
      <div
        style="
          text-align: center;
          font-size: 20px;
          color: #1aabb8;
          margin-top: 50px;
          margin-bottom: 20px;
        "
      >
      {{$t('common.trainerName')}} 【{{ nickName }}】 {{$t('common.planGroup')}}
      </div>
      <div class="infoBoxTop">
        <div style="width: 200px"></div>
        <div class="groupRecord">
          {{ actionName }}
          <span class="color88" v-if="$i18n.locale === 'zh-CN' "> 第{{ group.seq }}组</span> <span class="color88" v-else >Group {{ group.seq }} </span>&nbsp;{{$t('common.maxGoalSpeed')}} ：
          <span class="color88">{{ group.rate }}m/s</span>&nbsp;{{$t('common.heft')}}：
          <span class="color88">{{ group.weight }}kg</span> {{$t('common.frequency')}}：
          <span class="color88">{{ group.frequency }}</span>
        </div>
        <div class="btnBox">
          <Button
            class="btnWhite"
            type="primary"
            style="margin-right: 15px"
            @click="playVideo"
            >{{$t('common.videoView')}}</Button
          >
          <Button class="btnWhite" type="primary" @click="doExport"
            >{{$t('export')}}</Button
          >
        </div>
      </div>
      <Collapse v-model="collapseName" style="margin-bottom: 50px">
        <Panel name="baseInfo">
          {{$t('common.sportInfo')}} 
          <p slot="content">
            <Row class="form-row">
              <Col span="6" class="form_filed">{{$t('common.planName')}}：</Col>
              <Col span="6" class="form_filed_val">{{ planName }}</Col>
              <Col span="6" class="form_filed">{{$t('common.courseName')}}：</Col>
              <Col span="6" class="form_filed_val">{{
                courseSnapshotName
              }}</Col>
              <Col span="6" class="form_filed">{{$t('common.sportStartColumn')}}：</Col>
              <Col span="6" class="form_filed_val">{{
                sportsRecord.startTrainTime
              }}</Col>
              <Col span="6" class="form_filed"> {{$t('common.sportEndColumn')}} ：</Col>
              <Col span="6" class="form_filed_val">{{
                sportsRecord.endTrainTime
              }}</Col>
            </Row>
          </p>
        </Panel>
        <Panel name="speed">
           {{$t('common.spMaxspeed')}} : {{ golaSpeed }} m/s
          <div slot="content">
            <div style="position: relative">
              <div style="text-align: center; padding: 10px">
                <span
                  ><span class="markInfo">{{$t('common.avgSpeed')}}：</span
                  >{{ groupStatistics.groupAvgSpeed }}m/s</span
                >&nbsp;&nbsp;&nbsp;&nbsp;
                <span
                  ><span class="markInfo">{{$t('common.maxSpeed')}}  ：</span
                  >{{ groupStatistics.groupMaxSpeed }}m/s</span
                >
              </div>
              <div
                style="
                  position: absolute;
                  right: 0;
                  top: 0;
                  cursor: pointer;
                  color: #2ac9cf;
                  font-weight: bold;
                "
                v-if="isSpeedBar"
                @click="changeViewLine"
              >
              {{$t('common.changeLine')}}  
              </div>
              <div
                v-else
                style="
                  position: absolute;
                  right: 0;
                  top: 0;
                  cursor: pointer;
                  color: #2ac9cf;
                  font-weight: bold;
                "
                @click="changeViewLine"
              >
              {{$t('common.changeBar')}}  
              </div>
            </div>
            <div ref="speed" style="height: 300px"></div>
            <div
              class="legendBox"
              v-if="avgSpeedDataArr.length && maxSpeedDataArr.length"
            >
              <div class="miniBox" v-if="isSpeedBar">
                <div class="l1">
                  <div class="greenIcon"></div>
                  {{$t('common.avgSpeed')}}   
                </div>
                <div class="l1">
                  <div class="blueIcon"></div>
                  {{$t('common.maxSpeed')}} 
                </div>
                <div class="l1">
                  <div class="redIcon"></div>
                  {{$t('common.lowMaxspeed')}}  
                </div>
                <div class="l1">
                  <div class="lineIcon"></div>
                  {{$t('common.maxGoalSpeed')}}   
                </div>
              </div>
              <div class="miniBox" v-else>
                <div class="l1">
                  <div class="greenIconLine">
                    <div class="lineIcon"></div>
                    <div class="circleIcon"></div>
                  </div>
                  {{$t('common.avgSpeed')}}   
                </div>
                <div class="l1">
                  <div class="blueIconLine">
                    <div class="lineIcon"></div>
                    <div class="circleIcon"></div>
                  </div>
                  {{$t('common.maxSpeed')}} 
                </div>
                <div class="l1">
                  <div class="redIconLine">
                    <div class="lineIcon"></div>
                    <div class="circleIcon"></div>
                  </div>
                  {{$t('common.lowMaxspeed')}}  
                </div>
                <div class="l1">
                  <div class="lineIcon"></div>
                  {{$t('common.maxGoalSpeed')}}   
                </div>
              </div>
            </div>
            <div style="margin: 0px 80px">
              <Table :columns="speedColumn" border :data="evaList" stripe>
                <template slot-scope="{ row, index }" slot="seq">
                  {{ index + 1 }}
                </template>
                <template slot-scope="{ row, index }" slot="opt">
                  <span>{{$t('common.outline')}}</span>
                </template>
              </Table>
            </div>
          </div>
        </Panel>
        <Panel name="function">
          {{$t('common.powerTargetTt')}}： {{ golaPower }} W
          <div slot="content">
            <div style="position: relative">
              <div style="text-align: center; padding: 10px">
                <span
                  ><span class="markInfo">  {{$t('common.avgPower')}}：</span
                  >{{ groupStatistics.groupAvgPower }}W</span
                >&nbsp;&nbsp;&nbsp;&nbsp;
                <span
                  ><span class="markInfo">{{$t('common.maxGoalPower')}}:</span
                  >{{ groupStatistics.groupMaxPower }}W</span
                >
              </div>
              <div
                style="
                  position: absolute;
                  right: 0;
                  top: 0;
                  cursor: pointer;
                  color: #2ac9cf;
                  font-weight: bold;
                "
                v-if="isPowerBar"
                @click="changeViewLineP"
              >
              {{$t('common.changeLine')}}  
              </div>
              <div
                v-else
                style="
                  position: absolute;
                  right: 0;
                  top: 0;
                  cursor: pointer;
                  color: #2ac9cf;
                  font-weight: bold;
                "
                @click="changeViewLineP"
              >
              {{$t('common.changeBar')}}  
              </div>
            </div>
            <div ref="function" style="height: 300px"></div>
            <div
              class="legendBox"
              v-if="avgFunctionDataArr.length && maxFunctionDataArr.length"
            >
              <div class="miniBox" v-if="isPowerBar">
                <div class="l1">
                  <div class="greenIcon"></div>
                  {{$t('common.avgSpeed')}}   
                </div>
                <div class="l1">
                  <div class="blueIcon"></div>
                  {{$t('common.maxGoalPower')}}    
                </div>
                <div class="l1">
                  <div class="redIcon"></div>
                  {{$t('common.lowPeakPower')}}    
                </div>
                <div class="l1">
                  <div class="lineIcon"></div>
                  {{$t('common.powerTarget')}}     
                </div>
              </div>
              <div class="miniBox" v-else>
                <div class="l1">
                  <div class="greenIconLine">
                    <div class="lineIcon"></div>
                    <div class="circleIcon"></div>
                  </div>
                  {{$t('common.avgPower')}}      
                </div>
                <div class="l1">
                  <div class="blueIconLine">
                    <div class="lineIcon"></div>
                    <div class="circleIcon"></div>
                  </div>
                  {{$t('common.maxGoalPower')}}        
                </div>
                <div class="l1">
                  <div class="redIconLine">
                    <div class="lineIcon"></div>
                    <div class="circleIcon"></div>
                  </div>
                  {{$t('common.lowPeakPower')}}         
                </div>
                <div class="l1">
                  <div class="lineIcon"></div>
                  {{$t('common.powerTarget')}}          
                </div>
              </div>
            </div>
            <div style="margin: 0px 80px">
              <Table :columns="functionColumn" border :data="evaList" stripe>
                <template slot-scope="{ row, index }" slot="seq">
                  {{ index + 1 }}
                </template>
              </Table>
            </div>
          </div>
        </Panel>
        <Panel name="power">
          {{$t('common.wGlobal')}} ：{{ golaWork }} J
          <div slot="content">
            
            <div style="position: relative">
            <div style="text-align: center; padding: 10px">
              <span
                ><span class="markInfo"> {{$t('common.peakWork')}}：</span
                >{{ groupStatistics.groupMaxStrength }}J</span
              >
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span
                ><span class="markInfo"> {{$t('common.avaPower')}}：</span
                >{{ groupStatistics.groupAvgStrength }}J</span
              >&nbsp;&nbsp;&nbsp;&nbsp;
              <span
                ><span class="markInfo"> {{$t('common.totalPower')}}：</span
                >{{ groupStatistics.groupTotalStrength }}J</span
              >
            </div>
            <div
                style="
                  position: absolute;
                  right: 0;
                  top: 0;
                  cursor: pointer;
                  color: #2ac9cf;
                  font-weight: bold;
                "
                v-if="isWorkBar"
                @click="changeViewLineW"
              >
              {{$t('common.changeLine')}}  
              </div>
              <div
                v-else
                style="
                  position: absolute;
                  right: 0;
                  top: 0;
                  cursor: pointer;
                  color: #2ac9cf;
                  font-weight: bold;
                "
                @click="changeViewLineW"
              >
              {{$t('common.changeBar')}}  
              </div>
            </div>
            <div ref="strength" style="height: 300px"></div>
            <div class="legendBox" v-if="strengthDataArr.length">
              <div class="miniBox"  v-if="isWorkBar">
                <div class="l1">
                  <div class="greenIcon"></div>
                  {{$t('common.workDone')}}
                </div>
                <div class="l1">
                  <div class="redIcon"></div>
                  {{$t('common.workBelow')}} 
                </div>
                <div class="l1">
                  <div class="lineIcon"></div>
                  {{$t('common.globalWork')}}   
                </div>
              </div>
               <div class="miniBox" v-else>
                <div class="l1">
                  <div class="greenIconLine">
                    <div class="lineIcon"></div>
                    <div class="circleIcon"></div>
                  </div>
                  {{$t('common.workDone')}}
                </div>
                <div class="l1">
                 <div class="redIconLine">
                    <div class="lineIcon"></div>
                    <div class="circleIcon"></div>
                  </div>
                  {{$t('common.workBelow')}} 
                </div>
                <div class="l1">
                  <div class="lineIcon"></div>
                  {{$t('common.globalWork')}}   
                </div>
              </div>
            </div>
            <div style="margin: 0px 80px">
              <Table :columns="strengthColumn" border :data="evaList" stripe>
                <template slot-scope="{ row, index }" slot="seq">
                  {{ index + 1 }}
                </template>
              </Table>
            </div>
          </div>
        </Panel>
      </Collapse>
    </div>
    <!-- 展示视频播放 -->
    <Modal
      v-model="showVideoVisible"
      :mask-closable="false"
      width="800"
      :title="$t('common.videoView')"
      mask
    >
      <VideoModail
        :videoList="videoList"
        :curPlayId="curPlayId"
        :playVideoUrl="playVideoUrl"
      />
      <div slot="footer" style="text-align: center">
        <Button @click="showVideoVisible=false">{{$t('cancel')}}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import echarts from "echarts";
import AnalysisReportApi from "@/api/analysisReportApi";
import sportsEvaluationApi from "@/api/sportsEvaluationApi";
import html2canvas from "html2canvas";
import { downloadByBase64 } from "../../utils/downloadImg";
import VideoApi from "@/api/videoApi";
import { getToken } from "@/libs/util";
import VideoModail from "./videoModail.vue";
import lineIcon from "../../assets/images/lineIcon.png";
import redIcon from "../../assets/images/dyfz.png";
export default {
  name: "page_report",
  components: { VideoModail },
  data() {
    return {
      isSpeedBar: true,
      isPowerBar: true,
      isWorkBar:true,
      showVideoVisible: false,
      videoList: [],
      curPlayId: "",
      playVideoUrl: "",
      nickName: "",
      sportsRecordId: "",
      actionName: "",
      planName: "",
      groupStatistics: {},
      courseSnapshotName: "",
      sportsRecord: { startTrainTime: "", endTrainTime: "" },
      collapseName: ["baseInfo", "speed", "power", "function"],
      speedDom: null,
      powerDom: null,
      functionDom: null,
      evaList: [],
      group: {},
      speedXaxis: [],
      avgSpeedDataArr: [], // 平均速度数组
      maxSpeedDataArr: [], // 最大速度数组
      golaSpeed: 0, // 目标速度
      golaPower: 0, // 目标功率
      golaWork: 0, // 目标做功
      color_no_pass: "#FE4C4C",
      avg_color: "#34DABA",
      max_color: "#0084F8",
      speedColumn: [
        { title: this.$t('common.frequency'), slot: "seq" },
        { title:   this.$t('common.maxSpeed') + "(m/s)", key: "maxSpeed" },
        { title:  this.$t('common.avgSpeed') + "(m/s)", key: "avgSpeed" },
        {
          title: this.$t('common.optColumn') ,
          key: 'action',
          width: 210,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  class: "btnRed",
                  on: {
                    click: () => {
                      this.delRecord(params.row.id);
                    },
                  },
                },
                this.$t('common.deleteBtn') 
              ),
            ]);
          },
        },
      ],
      // 功率
      avgFunctionDataArr: [],
      maxFunctionDataArr: [],
      functionColumn: [
        { title: this.$t('common.frequency'), slot: "seq" },
        { title: this.$t('common.maxGoalPower') + "(W)", key: "maxPower" },
        { title: this.$t('common.avgPower')  + "(W)", key: "avgPower" },
        {
          title: this.$t('common.optColumn') ,
          key: "action",
          width: 210,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  class: "btnRed",
                  on: {
                    click: () => {
                      this.delRecord(params.row.id);
                    },
                  },
                },
                this.$t('common.deleteBtn') 
              ),
            ]);
          },
        },
      ],
      strengthDataArr: [],
      strengthColumn: [
        { title: this.$t('common.frequency'), slot: "seq" },
        { title:  this.$t('common.workDone') +  "(J)", key: "strength" },
        {
          title: this.$t('common.optColumn') ,
          key: "action",
          width: 210,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  class: "btnRed",
                  on: {
                    click: () => {
                      this.delRecord(params.row.id);
                    },
                  },
                },
                this.$t('common.deleteBtn') 
              ),
            ]);
          },
        },
      ],
    };
  },
  mounted() {
    this.sportsRecordId = this.$route.query.id;
    this.$Spin.show({
      render: (h) => {
        return h("div", [
          h("Icon", {
            class: "demo-spin-icon-load",
            props: {
              type: "ios-loading",
              size: 18,
            },
          }),
          h("div", "Loading"),
        ]);
      },
    });
    this.initAnalysisData();
  },
  methods: {
    changeViewLine() {
      if (this.isSpeedBar) {
        this.initSpeedChartLine();
      } else {
        this.initSpeedChart();
      }
      this.isSpeedBar = !this.isSpeedBar;
    },
    changeViewLineP() {
      if (this.isPowerBar) {
        this.initFunctionChartLine()
      } else {
        this.initFunctionChart()
      }
      this.isPowerBar = !this.isPowerBar;
    },
 changeViewLineW() {
      if (this.isWorkBar) {
        this.initPowerChartLine();
      } else {
        this.initPowerChart();
      }
      this.isWorkBar = !this.isWorkBar;
    },
    playVideo() {
      this.queryVideoList();
    },
    queryVideoList() {
      VideoApi.getVideoList(this.sportsRecordId).then(
        (res) => {
          this.videoList = res.data.data;
          if (this.videoList.length == 0) {
            this.$Message.error(this.$t('common.noVideoSport'));
            return;
          }

          const video = this.videoList[0];
          this.curPlayId = video.id;
          this.playVideoUrl =
            "web/video/play/" + video.id + "?token=" + getToken();

          setTimeout(() => {
            this.showVideoVisible = true;
          }, 1000);
        },
        (error) => {
          this.$Message.error(this.$t('common.noVideo'));
          this.videoList = [];
        }
      );
    },
    delRecord(id) {
      this.$Modal.confirm({
        title: this.$t('common.dDeleteTitleConfirm'),
        content: this.$t('common.DdeleteCt'),
        okText: this.$t('common.deleteBtn'),
        cancelText: this.$t('cancel'),
        onOk: () => {
          sportsEvaluationApi.sportsEvaluation(id).then(
            (res) => {
              this.$Message.success(this.$t('common.deleteSuc'));
              // this.fetchDataList()
              window.location.reload();
            },
            (error) => {
              this.$Message.error(error.response.data.msg);
            }
          );
        },
      });
    },
    doExport() {
      // #export_report_id 就是我们要获取截图对应的 DOM 元素选择器
      html2canvas(document.querySelector("#export_report_id"), {
        useCORS: true, // 【重要】开启跨域配置
        scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
        allowTaint: true, // 允许跨域图片
      }).then((canvas) => {
        const imgData = canvas.toDataURL("image/jpeg", 1.0);
        downloadByBase64(imgData,  this.$t('common.reportExport') + `-${new Date().getTime()}.png`);
      });
    },
    initAnalysisData() {
      AnalysisReportApi.queryGroupAnalysisReport(this.sportsRecordId).then(
        (res) => {
          this.$Spin.hide();
          res = res.data.data;
          this.nickName = res.nickName;
          this.actionName = res.actionName;
          this.planName = res.planName;
          this.courseSnapshotName = res.courseSnapshotName;
          this.sportsRecord = res.sportsRecord;
          this.group = res.group;
          this.golaSpeed = this.group.rate;
          this.golaWork = this.group.work || 0;
          this.golaPower = this.group.power || 0;
          this.evaList = res.eva;
          this.groupStatistics = res.groupStatistics;

          // 设置速度
          var speedAvgDataArr = [];
          var speedMaxDataArr = [];
          var functionAvgDataArr = [];
          var functionMaxDataArr = [];
          var strengthDataArr = [];
          for (var i = 0; i < this.evaList.length; i++) {
            var eva = this.evaList[i];
            var color = this.avg_color;
            // var maxColor = this.max_color
            // if (eva.avgSpeed < this.golaSpeed) {
            //   color = this.color_no_pass
            // }
            // if (eva.maxSpeed < this.golaSpeed) {
            //   maxColor = this.color_no_pass
            // }
            this.speedXaxis.push(i + 1 + "");
            speedAvgDataArr.push({
              name: this.$t('common.avgSpeed') + "(m/s)",
              value: eva.avgSpeed,
              itemStyle: { color: color },
            });
            speedMaxDataArr.push({
              name:  this.$t('common.maxSpeed') + "(m/s)",
              value: eva.maxSpeed,
              itemStyle: {
                color:
                  eva.maxSpeed < this.golaSpeed
                    ? this.color_no_pass
                    : this.max_color,
              },
            });
            functionAvgDataArr.push({
              name:  this.$t('common.avgPower') +  "(W)",
              value: eva.avgPower,
              itemStyle: { color: this.avg_color },
            });
            functionMaxDataArr.push({
              name:  this.$t('common.maxGoalPower') +  "(W)",
              value: eva.maxPower,
              itemStyle: {
                color:
                  eva.maxPower < this.golaPower
                    ? this.color_no_pass
                    : this.max_color,
              },
            });
            strengthDataArr.push({
              name:   this.$t('common.workDone') +  "(J)",
              value: eva.strength,
              itemStyle: {
                color:
                  eva.strength < this.golaWork
                    ? this.color_no_pass
                    : this.avgColor,
              },
            });
          }
          this.avgSpeedDataArr = speedAvgDataArr;
          this.maxSpeedDataArr = speedMaxDataArr;

          this.avgFunctionDataArr = functionAvgDataArr;
          this.maxFunctionDataArr = functionMaxDataArr;
          this.strengthDataArr = strengthDataArr;
          this.initSpeedChart();
          this.initPowerChart();
          this.initFunctionChart();
        },
        (error) => {
          this.$Message.error(error.response.data.msg);
          this.$Spin.hide();
        }
      );
    },
    // 速度曲线
    initSpeedChart() {
      const option = {
        // title: {
        //   subtext: '备注:当平均/峰值速度小于目标速度时显示红色',
        //   x: 'right',
        //   y: 'top'
        // },
        tooltip: {},
        // legend: {
        //   x:'center',
        //   y:'bottom',
        //   // icon:"rect", // 图例icon为方块
        //         itemHeight:18, // 图例icon高度
        //         itemWidth:18, // 图例icon宽度
        //   data: [
        //     {name:'平均速度'},
        //   {name:'峰值速度'},
        //   {
        //       name: "低于峰值目标速度",
        //       lineStyle: {
        //         type: "dotted",
        //         width: 3,
        //         color: "red",
        //       },

        //       // icon: ("image://" + redIcon + ""),

        //     },
        //   {
        //       name: "峰值目标速度",
        //       icon: "image://" + lineIcon + "",

        //     },

        // ]
        // },
        grid: {
          show: false,
        },
        xAxis: [
          {
            type: "category",
            name:  this.$t('common.frequency') ,
            nameTextStyle: {
              color: "#aaa",
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
            splitLine: {
              show: false, // 不显示网格线
            },
            data: this.speedXaxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name:   this.$t('common.speed')+ "(m/s)",
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            color: "#34DABA",
            name: this.$t('common.avgSpeed') ,
            data: this.avgSpeedDataArr,
          },
          {
            type: "bar",
            color: "#0084F8",
            name: this.$t('common.maxSpeed'), 
            data: this.maxSpeedDataArr,
          },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "峰值目标速度",
          //   color: "transparent",
          // },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "低于峰值目标速度",
          //   color: "transparent",
          // },
          {
            type: "line",
            name:  this.$t('common.globalSpeed') + "(m/s)",
            data: [this.golaSpeed],
            itemStyle: {
              opacity: 0,
            },
            markLine: {
              symbol: ["none", "none"],
              lineStyle: {
                type: "solid",
                color: "red",
              },
              data: [
                {
                  name: this.$t('common.globalSpeed'),
                  yAxis: this.golaSpeed,
                },
              ],
            },
          },
        ],
        //   visualMap: [
        // {
        //   show: true,
        //   dimension: 0,
        //   precision:2,//设置小数精度，默认0没有小数
        //   seriesIndex: 1, //峰值速度数据
        //   pieces: [
        //     {
        //       gt:0,
        //       lte:this.golaSpeed, //小于等于
        //       color: "red",
        //     },
        //     {
        //       gt:this.golaSpeed, //大于
        //       color: "#0084F8",

        //     },
        //   ],
        // },]
      };
      if (this.speedDom) {
        this.speedDom.dispose();
      }
      this.speedDom = echarts.init(this.$refs.speed);
      this.speedDom.setOption(option);
    },

    // 速度曲线
    initSpeedChartLine() {
      const option = {
        // title: {
        //   subtext: '备注:当平均/峰值速度小于目标速度时显示红色',
        //   x: 'right',
        //   y: 'top'
        // },
        tooltip: {},
        // legend: {
        //   x:'center',
        //   y:'bottom',
        //   // icon:"rect", // 图例icon为方块
        //         itemHeight:18, // 图例icon高度
        //         itemWidth:18, // 图例icon宽度
        //   data: [
        //     {name:'平均速度'},
        //   {name:'峰值速度'},
        //   {
        //       name: "低于峰值目标速度",
        //       lineStyle: {
        //         type: "dotted",
        //         width: 3,
        //         color: "red",
        //       },

        //       // icon: ("image://" + redIcon + ""),

        //     },
        //   {
        //       name: "峰值目标速度",
        //       icon: "image://" + lineIcon + "",

        //     },

        // ]
        // },
        grid: {
          show: false,
        },
        xAxis: [
          {
            type: "category",
            name:  this.$t('common.frequency') ,
            nameTextStyle: {
              color: "#aaa",
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
            splitLine: {
              show: false, // 不显示网格线
            },
            data: this.speedXaxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.$t('common.speed') + "(m/s)",
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            color: "#34DABA",
            name:  this.$t('common.avgSpeed') ,
            data: this.avgSpeedDataArr,
            // label: {
            //   show: true,
            //   position: "top",
            // },
          },
          {
            type: "line",
            color: "#0084F8",
            name: this.$t('common.maxSpeed'), 
            data: this.maxSpeedDataArr,
            // label: {
            //   show: true,
            //   position: "top",
            // },
          },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "峰值目标速度",
          //   color: "transparent",
          // },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "低于峰值目标速度",
          //   color: "transparent",
          // },
          {
            type: "line",
            name:   this.$t('common.globalSpeed') + "(m/s)",
            data: [this.golaSpeed],
            itemStyle: {
              opacity: 0,
            },
            markLine: {
              symbol: ["none", "none"],
              lineStyle: {
                type: "solid",
                color: "red",
              },
              data: [
                {
                  name:  this.$t('common.globalSpeed'),
                  yAxis: this.golaSpeed,
                },
              ],
            },
          },
        ],
        //   visualMap: [
        // {
        //   show: true,
        //   dimension: 0,
        //   precision:2,//设置小数精度，默认0没有小数
        //   seriesIndex: 1, //峰值速度数据
        //   pieces: [
        //     {
        //       gt:0,
        //       lte:this.golaSpeed, //小于等于
        //       color: "red",
        //     },
        //     {
        //       gt:this.golaSpeed, //大于
        //       color: "#0084F8",

        //     },
        //   ],
        // },]
      };
      // 销毁echarts图表
      if (this.speedDom) {
        this.speedDom.dispose();
      }
      this.speedDom = echarts.init(this.$refs.speed);
      this.speedDom.setOption(option);
    },
    // 功率
    initFunctionChart() {
      const option = {
        tooltip: {},
        // legend: {
        //   selectedNode:false,
        //   x:'center',
        //   y:'bottom',
        //   icon:"rect", // 图例icon为方块
        //         itemHeight:18, // 图例icon高度
        //         itemWidth:18, // 图例icon宽度
        //   data: [
        //     {
        //       name:'平均功率'
        //     },
        //     {
        //       name:'峰值功率'
        //     },

        //   //   {
        //   //     name: "低于峰值目标功率",

        //   //     icon: "image://" + redIcon + "",

        //   //   },
        //   // {
        //   //     name: "峰值目标功率",
        //   //     icon: "image://" + lineIcon + "",

        //   //   },
        //   ]

        // },
        grid: {
          show: false,
        },
        xAxis: [
          {
            type: "category",
            name:  this.$t('common.frequency') ,
            nameTextStyle: {
              color: "#aaa",
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
            splitLine: {
              show: false, // 不显示网格线
            },
            data: this.speedXaxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name:  this.$t('common.power') + "(W)",
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            color: "#34DABA",
            name: this.$t('common.avgPower') , 
            data: this.avgFunctionDataArr,
          },
          {
            type: "bar",
            color: "#0084F8",
            name: this.$t('common.maxGoalPower') , 
            data: this.maxFunctionDataArr,
          },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "峰值目标功率",
          //   color: "transparent",
          // },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "低于峰值目标功率",
          //   color: "transparent",
          // },
          {
            type: "line",
            name: this.$t('common.globalPower') ,
            data: [this.golaPower],
            itemStyle: {
              opacity: 0,
            },
            markLine: {
              symbol: "none",
              lineStyle: {
                type: "solid",
                color: "red",
              },
              data: [
                {
                  name: this.$t('common.globalPower'),
                  yAxis: this.golaPower,
                },
              ],
            },
          },
        ],
      };
       if (this.functionDom) {
        this.functionDom.dispose();
      }
      this.functionDom = echarts.init(this.$refs.function);
      this.functionDom.setOption(option);
    },
initFunctionChartLine() {
      const option = {
        tooltip: {},
        // legend: {
        //   selectedNode:false,
        //   x:'center',
        //   y:'bottom',
        //   icon:"rect", // 图例icon为方块
        //         itemHeight:18, // 图例icon高度
        //         itemWidth:18, // 图例icon宽度
        //   data: [
        //     {
        //       name:'平均功率'
        //     },
        //     {
        //       name:'峰值功率'
        //     },

        //   //   {
        //   //     name: "低于峰值目标功率",

        //   //     icon: "image://" + redIcon + "",

        //   //   },
        //   // {
        //   //     name: "峰值目标功率",
        //   //     icon: "image://" + lineIcon + "",

        //   //   },
        //   ]

        // },
        grid: {
          show: false,
        },
        xAxis: [
          {
            type: "category",
            name:  this.$t('common.frequency') ,
            nameTextStyle: {
              color: "#aaa",
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
            splitLine: {
              show: false, // 不显示网格线
            },
            data: this.speedXaxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name:  this.$t('common.power') +"(W)",
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            color: "#34DABA",
            name: this.$t('common.avgPower') , 
            data: this.avgFunctionDataArr,
            // label: {
            //   show: true,
            //   position: "top",
            // },
          },
          {
            type: "line",
            color: "#0084F8",
            name: this.$t('common.maxGoalPower') ,  
            data: this.maxFunctionDataArr,
            // label: {
            //   show: true,
            //   position: "top",
            // },
          },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "峰值目标功率",
          //   color: "transparent",
          // },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "低于峰值目标功率",
          //   color: "transparent",
          // },
          {
            type: "line",
            name: this.$t('common.globalPower'),
            data: [this.golaPower],
            itemStyle: {
              opacity: 0,
            },
            markLine: {
              symbol: "none",
              lineStyle: {
                type: "solid",
                color: "red",
              },
              data: [
                {
                  name: this.$t('common.globalPower'),
                  yAxis: this.golaPower,
                },
              ],
            },
          },
        ],
      };
       if (this.functionDom) {
        this.functionDom.dispose();
      }
      this.functionDom = echarts.init(this.$refs.function);
      this.functionDom.setOption(option);
    },

    // 功
    initPowerChart() {
      const option = {
        tooltip: {},
        // legend: {
        //   x:'center',
        //   y:'bottom',
        //   icon:"rect", // 图例icon为方块
        //         itemHeight:18, // 图例icon高度
        //         itemWidth:18, // 图例icon宽度
        //   data: [{
        //     name:'做功',
        //   },
        //   {
        //       name: "低于目标做功",
        //       icon: "image://" + redIcon + "",

        //     },
        //   {
        //       name: "目标做功",
        //       icon: "image://" + lineIcon + "",

        //     },
        // ]
        // },
        grid: {
          show: false,
        },
        xAxis: [
          {
            type: "category",
            name:  this.$t('common.frequency') ,
            nameTextStyle: {
              color: "#aaa",
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
            splitLine: {
              show: false, // 不显示网格线
            },
            data: this.speedXaxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name:  this.$t('common.workDone') + "(J)",
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            color: this.avg_color,
            name: this.$t('common.workDone'),
            data: this.strengthDataArr,
          },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "目标做功",
          //   color: "transparent",
          // },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "低于目标做功",
          //   color: "transparent",
          // },
          {
            type: "line",
            name:this.$t('common.globalWork') ,
            data: [this.golaWork],
            itemStyle: {
              opacity: 0,
            },
            markLine: {
              symbol: ["none", "none"],
              lineStyle: {
                type: "solid",
                color: "red",
              },
              data: [
                {
                  name: this.$t('common.globalWork') ,
                  yAxis: this.golaWork,
                },
              ],
            },
          },
        ],
      };
      if (this.powerDom) {
        this.powerDom.dispose();
      }
      this.powerDom = echarts.init(this.$refs.strength);
      this.powerDom.setOption(option);
    },
    initPowerChartLine() {
      const option = {
        tooltip: {},
        // legend: {
        //   x:'center',
        //   y:'bottom',
        //   icon:"rect", // 图例icon为方块
        //         itemHeight:18, // 图例icon高度
        //         itemWidth:18, // 图例icon宽度
        //   data: [{
        //     name:'做功',
        //   },
        //   {
        //       name: "低于目标做功",
        //       icon: "image://" + redIcon + "",

        //     },
        //   {
        //       name: "目标做功",
        //       icon: "image://" + lineIcon + "",

        //     },
        // ]
        // },
        grid: {
          show: false,
        },
        xAxis: [
          {
            type: "category",
            name:  this.$t('common.frequency') ,
            nameTextStyle: {
              color: "#aaa",
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
            splitLine: {
              show: false, // 不显示网格线
            },
            data: this.speedXaxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name:  this.$t('common.workDone') + "(J)",
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            color: this.avg_color,
            name:  this.$t('common.workDone') ,
            data: this.strengthDataArr,
            //  label: {
            //   show: true,
            //   position: "top",
            // },
          },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "目标做功",
          //   color: "transparent",
          // },
          // {
          //   /* TIP: 增加的series */
          //   type: "line",
          //   symbol: "none",
          //   name: "低于目标做功",
          //   color: "transparent",
          // },
          {
            type: "line",
            name:  this.$t('common.globalWork') ,
            data: [this.golaWork],
            itemStyle: {
              opacity: 0,
            },
            markLine: {
              symbol: ["none", "none"],
              lineStyle: {
                type: "solid",
                color: "red",
              },
              data: [
                {
                  name:this.$t('common.globalWork'),
                  yAxis: this.golaWork,
                },
              ],
            },
          },
        ],
      };
      if (this.powerDom) {
        this.powerDom.dispose();
      }
      this.powerDom = echarts.init(this.$refs.strength);
      this.powerDom.setOption(option);
    },
  },
};
</script>

<style>
html,
body {
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

.sportRecord {
  overflow: auto;
  flex: 1;
  height: 80px;
  text-align: center;
}

.btnBox {
  width: 180px;
  display: flex;
  justify-content: end;
}

.infoBoxTop {
  display: flex;
  align-items: flex-end;
  height: 30px;
  margin-bottom: 20px;
  width: 100%;
  justify-content: space-between;
}

.groupRecord {
  text-align: center;
  padding: 0px 0px 10px 0px;
  color: #ff9900;
  font-size: 16px;
  line-height: 20px;
}

.color88 {
  color: #888;
}

.firstIcon {
  background: url("../../assets/images/first.png");
  background-size: contain;
  width: 20px;
  height: 28px;
  margin: 5px;
}

.secondIcon {
  background: url("../../assets/images/second.png");
  background-size: contain;
  width: 20px;
  height: 28px;
  margin: 5px;
}

.thirdIcon {
  background: url("../../assets/images/third.png");
  background-size: contain;
  width: 20px;
  height: 28px;
  margin: 5px;
}

.markInfo {
  color: #1aabb8;
  font-weight: bold;
}

.legendBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
  margin-bottom: 20px;
  .miniBox,
  .l1 {
    display: flex;
    align-items: center;
  }
  .blueIcon {
    background: #0084f8;
    width: 26px;
    height: 26px;
    margin-left: 10px;
    margin-right: 5px;
  }
  .greenIcon {
    background: #34daba;
    width: 26px;
    height: 26px;
    margin-left: 10px;
    margin-right: 5px;
  }
  .redIcon {
    background: red;
    /* background: url('../../assets/images/dyfz.png') no-repeat; */
    width: 26px;
    height: 26px;
    margin-left: 10px;
    margin-right: 5px;
  }
  .blueIconLine {
    position: relative;
    width: 26px;
    height: 26px;
    margin-left: 10px;
    margin-right: 10px;
    .lineIcon {
      height: 2px;
      background: #0084f8;
      position: absolute;
      left: -5px;
      right: 0;
      top: 50%;
    }
    .circleIcon {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 1px solid #0084f8;
      position: absolute;
      left: 50%;
      background: #fff;
      top: 37%;
    }
  }
  .greenIconLine {
    position: relative;
    width: 26px;
    height: 26px;
    margin-left: 10px;
    margin-right: 10px;
    .lineIcon {
      height: 2px;
      background: #34daba;
      position: absolute;
      left: -5px;
      right: 0;
      top: 50%;
    }
    .circleIcon {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 1px solid #34daba;
      position: absolute;
      left: 50%;
      background: #fff;
      top: 37%;
    }
  }
  .redIconLine {
    position: relative;
    width: 26px;
    height: 26px;
    margin-left: 10px;
    margin-right: 10px;
    .lineIcon {
      height: 2px;
      background: red;
      position: absolute;
      left: -5px;
      right: 0;
      top: 50%;
    }
    .circleIcon {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 1px solid red;
      position: absolute;
      left: 50%;
      background: #fff;
      top: 37%;
    }
  }
  .lineIcon {
    background: url("../../assets/images/lineIcon.png") center center no-repeat;
    width: 26px;
    height: 26px;
    margin-left: 10px;
    margin-right: 5px;
  }
}
</style>
